<template>
  <el-container  class="height100    domainMainContent containerHeight">
    <el-main class="el-mainContent  height100 overflowYHidden"   ref="managerMain">
      <div class="medias">
        <div class="mediasBox dept-aside">
          <div class="mediasTitle" :class="[item.type == type ? 'mediasTitleChecked' : '']" v-for="(item,index) in typeList" :key="index" @click="handleClick(item)">
            <i :class="item.icon"></i>
            <span class="name">{{item.name}}</span>
          </div>
        </div>
        <div class="mediasList">
          <div class="upload_column">
            <el-upload
              class="upload-demo"
              action=""
              :http-request='uploadImg'
              :before-upload="beforeUpload"
              multiple
              :file-list="fileList"
              :show-file-list="false">
              <el-button size="small" icon="el-icon-plus">添加文件</el-button>
            </el-upload>
          </div>
          <div class="fileList">
            <div v-for="(item,index) in fileList" :key="index" class="card_list">
              <div class="card_icon">
                <!-- <i class="icon-file32x32 icon-file-gif"></i> -->
                <i :class="setClass(item)"></i>
                <span class="card_name" :title="item.name">{{item.name}}</span>
              </div>
              <div class="card_size">{{(item.size/1024).toFixed(2)}}KB</div>
              <div class="card_time">{{item.createDate}}</div>
              <div class="card_btn">
                <el-link type="info" class="link_btn" @click="download(item)">下载</el-link>
                <el-link type="info" class="link_btn" @click="deleteMedias(item)">删除</el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name:'',
  data () {
    return {
      typeList: [{
        icon: "fa fa-photo",
        name: "图片",
        type: "image"
      },{
        icon: "fa fa-feed",
        name: "语音",
        type: "voice"
      },{
        icon: "fa fa-film",
        name: "视频",
        type: "video"
      },{
        icon: "fa fa-file-o",
        name: "文件",
        type: "file"
      }],
      fileList: [],
      type: "image",
    }
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
      let that = this;
      this.$api.getMediasList(this.$route.query.domainid,this.type,{
        onSucess: function(res) {
          let data = res.data;
          if(data.errcode == 0){
            that.fileList = data.data;
          }
        }
      })
    },
    beforeUpload(file) {
      let fileType = file.name.split('.')[file.name.split('.').length - 1];
      let fileSize = file.size / 1024 / 1024;
      let message = "";
      let size = false;
      let isImg = false;
      let isVoice = false;
      let isVideo = false;
      let isFile = false;
      switch(this.type){
        case "image":
          if(
            file.type != 'image/jpeg' && 
            file.type != 'image/png' && 
            file.type != 'image/gif' && 
            file.type != 'image/jpg'
          ){
            message = "上传图片只能是 JPG/PNG/GIF/JEPG 格式";
            this.$message.error(message);
          }else{
            isImg = true;
          }
          size = fileSize < 10;
          break;
        case "voice":
          if(fileType != "amr"){
            message = "上传语音只能是 AMR 格式";
            this.$message.error(message);
          }else{
            isVoice = true;
          }
          size = fileSize < 2;
          break;
        case "video":
          if(file.type != 'video/mp4'){
            message = "上传视频只能是 MP4 格式";
            this.$message.error(message);
          }else{
            isVideo = true;
          }
          size = fileSize < 10;
          break;
        case "file":
          isFile = true;
          size = fileSize < 20;
          break;
      }
      if (!size) {
        this.$message.error('上传文件过大');
      }
      return (isImg || isVoice || isVideo || isFile) && size;
    },
    uploadImg(e) {
			let fileArray = e.file;
			let file = fileArray;
			let that = this;
			let form = new FormData();
			form.append("file", file);
      let files = form;
      this.$api.uploadMedias(this.$route.query.domainid,this.type,files,{
        onSucess: function(res) {
          let data = res.data;
          if(data.errcode == 0){
            that.$message({
              message: that.$t("msg_upload_success"),
              type: 'success'
            });
            that.getList()
          }
        }
      })
    },
    handleClick(item) {
      this.type = item.type;
      this.getList();
      console.log("this.type",this.type)
    },
    setClass(item) {
      let iconName;
      if(item.name){
        let name = item.name.split('.')[item.name.split('.').length - 1];
        iconName = "icon-file32x32 icon-file-" + name;
      }else{
        iconName = "icon-file32x32 icon-file-";
      }
      return iconName;
    },
    download(item) {
      let contextPath = location.origin + "/" + cp
      let url = "/authtime/domain/"+ this.$route.query.domainid +"/wechat/medias/"+ item.mediaid +"/download?fileName="+ item.name
      window.open(contextPath+url)
    },
    deleteMedias(item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = item.id;
        let arr = [];
        arr.push(id);
        let that = this;
        this.$api.deleteMedias(this.$route.query.domainid,arr,{
          onSucess: function(res) {
            let data = res.data;
            if(data.errcode == 0){
              that.$message({
                message: that.$t("removed"),
                type: 'success'
              });
              that.getList()
            }
          }
        })
      }).catch(() => {})
    }
  },
}
</script>

<style lang='scss' scoped>
</style>
